<template>
  <view class="popo-wrapper" :class="[showConfirm ? 'inshow':'outshow']">
    <view class="o-popo-model" :style="{zIndex: zindex}" @click="modelclick()"></view>
    <view class="o-popo-container" :style="{zIndex: zindex}">
      <view v-if="content.title" class="o-popo-title" :style="content.titleStyle">{{ content.title }}</view>
      <view v-if="content.contentList" class="o-popo-content" :style="content.contentStyle">
        <view v-for="(item, index) in content.contentList" :key="index">{{ item }}</view>
      </view>
      <view v-else-if="content.content" class="o-popo-content" :style="content.contentStyle" v-html="content.content"></view>
      <view v-else class="o-popo-content">
        <slot name="content"></slot>
      </view>
      <view class="o-popo-btn" :style="content.containerStyle">
        <text v-if="content.cancleTxt" class="o-popo-lbtn" :style="content.cancleTxtStyle" @click.stop.prevent="closeConfirm(1)">{{ content.cancleTxt }}</text>
        <text v-if="content.yesTxt" class="o-popo-rbtn" :style="content.yesTxtStyle" @click.stop.prevent="closeConfirm(2)">
          {{ content.yesTxt }}
          <template v-if="content.duration">({{ content.duration/1000 }}s)</template>
        </text>
        <view v-if="content.authBtn && content.openType" :style="content.yesTxtStyle" class="relative-container o-popo-rbtn">
          {{ content.authBtnTxt }}
          <b-open-type :open-type="content.openType" @openTypeClick="closeConfirm(2)" @openCallBack="openCallBack" />
        </view>
      </view>
      <view v-if="showClose" class="close-icon" @click.stop.prevent="closeConfirm(0)">
        <image src="/static/images/commodity/close_ico_white.png" />
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    showClose: {
      type: Boolean,
      default: false
    },
    //点击遮罩是否可以关闭
    modelClose: {
      type: Boolean,
      default: true
    },
    //是否延时回调
    hasTimeOut: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      initContent: {
        containerStyle: '',
        title: '',
        titleStyle: '',
        contentList: null,
        content: '',
        contentStyle: '',
        cancleTxt: '取消',
        cancleTxtStyle: '',
        yesTxt: '确定',
        yesTxtStyle: '',
        maskClickClose: true,
        authBtn: false,
        authBtnTxt: '确定',
        openType: '',
        duration: 0,
        yesCb: () => {},
        cancleCb: () => {}
      },
      showConfirm: false,
      zindex: -10,
      timer: null,
      ackTimer: null,
      content: {}
    }
  },
  methods: {
    modelclick(){
      if(this.modelClose){
        this.closeConfirm(0);
      }
    },
    show(data) {
      this.content = Object.assign({}, this.initContent, data)
      this.zindex = 100
      if (this.content.duration) {
        clearInterval(this.ackTimer)
        this.ackTimer = setInterval(() => {
          this.content.duration -= 1000
          if (this.content.duration <= 0) {
            clearInterval(this.ackTimer)
          }
        }, 1000)
      }
      this.showConfirm = true
    },
    openCallBack() {
      this.closeConfirm(2)
      if (this.content.openType === 'share') {
        this.$emit('shareClick')
      }
    },
    closeConfirm(type) {
      if (!this.content.maskClickClose && type === 0) return
      if (this.content.duration > 0 && type === 2) return
      clearTimeout(this.timer)
      this.showConfirm = false
      if(this.hasTimeOut){
        this.timer = setTimeout(() => {
          this.zindex = -10
          clearTimeout(this.timer)
          if (type === 1 || type === 0) {
            this.content.cancleCb && this.content.cancleCb(type)
          } else if (type === 2) {
            this.content.yesCb && this.content.yesCb(type)
          }
        }, 400)
      }else{
        this.zindex = -10
        clearTimeout(this.timer)
        if (type === 1 || type === 0) {
          this.content.cancleCb && this.content.cancleCb(type)
        } else if (type === 2) {
          this.content.yesCb && this.content.yesCb(type)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.popo-wrapper {
  .o-popo-model {
    position: fixed;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.4s;
  }
  .o-popo-container {
    position: fixed;
    top: 40%;
    left: 50%;
    width: 602rpx;
    // border-radius: 20rpx;
    // overflow: hidden;
    background-color: #fff;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity  0.3s;
  }
  .o-popo-title {
    padding: 30rpx 0;
    text-align: center;
    color: #000;
    font-size: 34rpx;
    font-weight:500;
  }
  .o-popo-content {
      max-width: 500rpx;
      padding: 0 30rpx 30rpx;
      margin: 0 auto;
      text-align: center;
      font-size: 28rpx;
      color: #000;
      word-wrap:break-word;
      word-break: break-all;
      white-space: pre-wrap;
      line-height: 45rpx;
  }
  .o-popo-btn {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    padding-bottom: 46rpx;
    // justify-content: space-between;
    .o-popo-lbtn, .o-popo-rbtn {
      width: 450rpx;
      margin-top: 30rpx;
      border: 2rpx solid #ccc;
      flex: 1;
      text-align: center;
      line-height: 86rpx;
      font-size: 30rpx;
      color: #999;
    }
    .o-popo-rbtn {
      background-color: #000;
      color: #fff;
      border: 2rpx solid #000;
    }
  }
  &.inshow {
    .o-popo-model {
      opacity: 1;
    }
    .o-popo-container {
      opacity: 1;
    }
  }
  &.outshow {
    .o-popo-model {
       opacity: 0;
    }
    .o-popo-container {
      opacity: 0;
    }
  }
  .close-icon {
    position: absolute;
    bottom: -100rpx;
    left: 50%;
    transform: translate(-50%);
    padding: 10rpx;
    image {
      width: 52rpx;
      height: 52rpx;
    }
  }
}
</style>
